<template>
  <div class="order">
    <div class="order-box">
      <div class="order-title">我的主账号</div>
    </div>
    <div class="order-seek">
      <div class="seek-input">
        <div class="seek-num">
          账号：
          <el-input v-model="input" placeholder="请输入内容" />
        </div>
        <div>
          状态：
          <el-select v-model="value" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="seek-btn">
        <button class="search-btn" @click="getData">搜索</button>
        <button class="reset-btn" @click="replacement">重置</button>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{background: '#F5F5F5'}">
        <el-table-column prop="userName" label="手机号" width="180" />
        <el-table-column prop="parentRemark" label="备注" width="140" />
        <el-table-column prop="permission" label="他给我的权限" width="140" />
        <el-table-column prop="status" label="权限状态" :formatter="statusFormat" />
        <el-table-column prop="createTime" label="申请时间" />
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-button type="text" v-if="scope.row.status===2" @click="clickEdit(scope.row)">编辑</el-button>
              <el-button v-if="scope.row.status === 1" type="text" @click="clickAgree(scope.row)">同意</el-button>
              <el-button v-if="scope.row.status === 1" type="text" @click="clickRefuse(scope.row)">拒绝</el-button>
              <el-button v-if="scope.row.status === 3 || scope.row.status === 4" type="text" @click="clickDel(scope.row)">删除</el-button>
              <el-button v-if="scope.row.status === 2" type="text" @click="clickRelieve(scope.row)">解除关系</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="pageParams.totalPage"
          :page.sync="pageParams.index"
          :limit.sync="pageParams.size"
          @pagination="getData"
        />
      </div>
    </div>
    <div class="dialog">
      <el-dialog
        :title="reminder"
        :visible.sync="valorisation"
        width="500px"
        :before-close="handleClose"
      >
        <div v-if="dialogState == 1" class="detail">
          <i class="iconfont icon-warn warn" />
          <div>确定要解除与账号{{ userName }}的关系吗？</div>
        </div>
        <div v-else>
          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
            <el-form-item label="备注" prop="parentRemark">
              <el-input v-model="ruleForm.parentRemark" />
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <span class="cancel">
            <el-button @click="cancel">取 消</el-button>
          </span>
          <span class="confirm">
            <el-button type="primary" @click="submit">确 定</el-button>
          </span>
        </span>
      </el-dialog>
    </div>
    <el-dialog
      :title="reminder"
      :visible.sync="dialogue"
      width="30%"
      :before-close="handleClose"
    >
      <div class="message-datail">{{ message }}</div>
      <span slot="footer" class="dialog-footer">
        <span class="cancel">
          <el-button @click="reminderCancel">取 消</el-button>
        </span>
        <span class="confirm">
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listMainAccount, updateMAcount, cancelRelationship, deleteMA, audit } from '@/api/main-account/main-account.js'
export default {
  data() {
    return {
      options: [
        {
          value: 1,
          label: '待验证'
        },
        {
          value: 2,
          label: '授权中'
        },
        {
          value: 3,
          label: '已拒绝'
        },
        {
          value: 4,
          label: '已解除关系'
        }
      ],
      type: '',
      username: '',
      judge: '',
      ruleForm: {
        id: '',
        parentRemark: ''
      },
      rules: {
        parentRemark: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
        ]
      },
      value: '',
      input: '',
      cur: 0,
      sentAccept: 1,
      valorisation: false,
      reminder: '',
      message: '',
      btnState: false,
      dialogState: '',
      dialogue: false,
      // 分页参数
      pageParams: {
        index: 1,
        size: 6,
        totalPage: 0
      },
      tableData: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 重置按钮
    replacement() {
      this.value = ''
      this.input = ''
    },
    cancel() {
      this.ruleForm = {}
      this.valorisation = false
    },
    handleClose() {
      this.ruleForm = {}
      this.valorisation = false
    },
    reminderCancel() {
      this.ruleForm = {}
      this.dialogue = false
    },
    // 得到我的主账户列表
    getData() {
      const params = {}
      if (this.value) {
        params.status = this.value
      }
      if (this.input) {
        params.userName = this.input
      }
      listMainAccount(this.pageParams.index, this.pageParams.size, params).then(res => {
        if (res.status === 200) {
          this.pageParams.totalPage = res.data.pages
          this.tableData = res.data.records
        }
      })
    },
    // 权限状态
    statusFormat(row) {
      switch (row.status) {
        case 1:
          return '等待验证'
        case 2:
          return '授权中'
        case 3:
          return '已拒绝'
        case 4:
          return '解除关系'
        default:
      }
    },
    // 点击同意
    clickAgree(row) {
      this.dialogue = true
      this.reminder = '同意'
      this.message = '是否同意该授权申请！'
      this.ruleForm = { id: row.id, type: 0 }
      this.judge = 3
    },
    // 点击拒绝
    clickRefuse(row) {
      this.dialogue = true
      this.reminder = '拒绝'
      this.message = '是否拒绝该授权申请！'
      this.ruleForm = { id: row.id, type: 1 }
      this.judge = 3
    },
    // 点击删除
    clickDel(row) {
      this.dialogue = true
      this.reminder = '删除'
      this.message = '是否从删除该主账号信息！'
      this.ruleForm.id = row.id
      this.judge = 0
    },
    // 点击编辑
    clickEdit(row) {
      this.ruleForm = { id: '', parentRemark: '' }
      this.valorisation = true
      this.ruleForm.id = row.id
      this.ruleForm.parentRemark = row.parentRemark
      this.judge = 2
    },
    // 点击解除关系
    clickRelieve(row) {
      this.valorisation = true
      this.reminder = '解除关系'
      this.ruleForm.id = row.id
      this.dialogState = 1
      this.userName = row.userName
      this.judge = 1
    },
    // 确定提交表单
    submit() {
      if (this.judge === 0) {
        deleteMA(this.ruleForm.id).then(res => {
          if (res.code === 0) {
            this.$message.success('删除成功')
            this.dialogue = false
            this.getData()
          } else {
            this.$message.error('删除失败')
          }
        })
      } else if (this.judge === 1) {
        cancelRelationship(this.ruleForm).then(res => {
          if (res.code === 0) {
            this.$message.success('解除成功')
            this.valorisation = false
            this.getData()
          } else {
            this.$message.error('解除失败')
          }
        })
      } else if (this.judge === 2) {
        this.$refs['ruleForm'].validate(valid => {
          if (valid) {
            updateMAcount(this.ruleForm).then(res => {
              if (res.code === 0) {
                this.$message.success('保存成功')
                this.getData()
                this.valorisation = false
              } else {
                this.$message.error('保存失败')
              }
            })
          }
        })
      } else {
        audit(this.ruleForm).then(res => {
          if (res.code === 0) {
            this.$message.success('操作成功')
            this.getData()
            this.dialogue = false
          } else {
            this.$message.error('系统出错')
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.order {
  background: #f5f5f5;
  .order-box {
    background: #ffffff;
    height: 56px;
    line-height: 56px;
    padding-left: 20px;
    border-bottom: 3px solid #e5e5e5;
    display: flex;
    .order-title {
      margin-right: 46px;
      color: #3d3d3d;
      font-size: 16px;
      font-weight: bold;
    }
    .order-tab {
      display: flex;
      width: 126px;
      justify-content: space-between;
      cursor: pointer;
    }
    .notAccept {
      border-bottom: 3px solid #ff3b30;
      height: 55px;
      color: #ff3b30;
    }
  }
  .order-seek {
    background: #ffffff;
    padding: 0 20px;
    height: 77px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .seek-input {
      display: flex;
      .seek-num {
        margin-right: 20px;
      }
    }
  }
  .table {
    background: #ffffff;
    padding: 20px;
    .page {
      margin-top: 39px;
      display: flex;
      justify-content: center;
    }
  }
  .detail{
    display: flex;
    align-items: center;
    justify-content: center;
    .warn{
      color: coral;
      margin-right: 10px;
      font-size: 30px;
      margin-bottom: 6px;
    }
  }
  .message-datail{
    text-align: center;
    font-size: 18px;
  }
  /deep/ .dialog{
    .el-input{
      width: 200px;
    }
  }
  /deep/ .table {
    .el-table {
      .cell {
        padding-left: 20px;
      }
    }
  }
  /deep/ .seek-input {
    .el-input {
      width: 130px;
      height: 35px;
      .el-input__inner {
        height: 35px;
      }
    }
  }
  /deep/ .seek-input {
    .el-select__caret {
      margin-top: 3px;
    }
  }
  /deep/ .cancel {
    margin-right: 10px;
    .el-button:hover {
      background: #ffdbd8;
      border: 1px solid #ff3b30;
      color: #ff3b30;
    }
  }
  /deep/ .confirm {
    .el-button--primary {
      background: #ff3b30;
      // color: black;
      color: #ffffff;
      border: 1px solid #ff3b30;
    }
  }
}
.el-main {
  overflow: hidden;
}
/deep/ .page {
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #f5f5f5;
    color: #e03523;
  }
}
/deep/ .page {
  .el-pagination.is-background .el-pager li:hover {
    color: #606266;
  }
}
/deep/ .page {
  .el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: #606266;
  }
}
/deep/ .page {
  .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
    background-color: #f5f5f5;
    color: #e03523;

    background: #f5f5f5;
  }
}
</style>
